<template>
  <div class="card">
    <div class="card-header" style="padding-bottom: 0px;">
      <h1>个人中心</h1>
    </div>
    <div class="card-body card-padding">
      <el-row :gutter="20">
        <el-col style="width: 200px;">
          <div style="text-align: center">
            <img v-if="admin.avatar" class="title-img" v-bind:src="admin.avatar" alt="">
            <img v-else class="title-img" src="../assets/img/profile-default.jpg" alt="">
          </div>
        </el-col>
        <el-col style="width:calc(100% - 200px);">
          <el-tabs active-name="baseInfo">
            <el-tab-pane label="基本信息" name="baseInfo">
              <div class="content-body">
                <div class="block">
                  <dl class="dl-horizontal">
                    <dt>ID编号：</dt>
                    <dd>{{admin.id}}</dd>
                  </dl>
                  <dl class="dl-horizontal">
                    <dt>登录名：</dt>
                    <dd>{{admin.login_name}}</dd>
                  </dl>
                  <dl class="dl-horizontal">
                    <dt>昵称：</dt>
                    <dd>{{admin.nickname}}</dd>
                  </dl>
                  <dl class="dl-horizontal">
                    <dt>最近登录：</dt>
                    <dd>{{admin.last_login}}</dd>
                  </dl>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPassword">
              <el-form :model="passForm" label-width="100px" style="width: 400px;">
                <el-form-item label="旧密码">
                  <el-input type="password" v-model="passForm.oldPass"></el-input>
                </el-form-item>
                <el-form-item label="新密码">
                  <el-input type="password" v-model="passForm.newPass"></el-input>
                </el-form-item>
                <el-form-item label="确认密码">
                  <el-input type="password" v-model="passForm.confirmPass"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="resetPassword">保存</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  var passForm = {
    'oldPass': '',
    'newPass': '',
    'confirmPass': ''
  }
  export default {
    data: function () {
      return {
        passForm,
        curId: '',
        curType: '',
        curObject: {},
        myInfo: {}
      }
    },
    computed: {
      admin: function () {
        return this.$store.state.admin.info
      }
    },
    created: function () {
      this.myInfo = this.admin
    },
    methods: {
      resetPassword: function () {
      }
    }
  }

</script>

<style scoped>
  .title-img {
    border-radius: 3px;
    width: 100%;
    margin-top: 40px;
  }
</style>
